<template>
  <div>
    <el-page-header @back="$router.go(-1)" content="报修"></el-page-header>
    <div class="orderContent">
      <el-form :model="form">
        <el-form-item label="报修设备" label-width="120px">
          <el-cascader v-model="casValue" :options="edTree" @change="casHandleChange" :props="props" clearable style="width: 100%"></el-cascader>
        </el-form-item>
        <el-form-item label="问题描述" label-width="120px">
          <el-input type="textarea" v-model="form.bill_why"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" label-width="120px">
          <el-upload class="upload-demo" action="http://121.199.29.84:8001/file/upload" :on-success="imgHandleSuccess" :on-remove="imgHandleRemove" :on-exceed="imgOverLimitHandler" :file-list="fileList" list-type="picture" :limit="3">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-button style="position: absolute; bottom: 10px; right:20px" type="primary" @click="toCommitHandler">提交</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { get, postJSON } from '@/utils/request.js'
export default {
  data() {
    return {
      engineer: [],
      order: {},
      form: {},
      casValue: [],
      props: {
        value: 'id',
        label: 'name'
      },
      fileList: []
    }
  },
  methods: {
    // 查询工程设备树
    findEngineerDeviceTree() {
      get('/engineer/findEngineerDeviceTree').then(res => {
        this.edTree = res.data
      })
    },
    // 级联面板change事件
    casHandleChange(val) {
      // 判断拿到的数组是否为空
      if (val) {
        this.form.engineer_id = val[0]
        this.form.device_id = val[1]
      }
    },

    // 图片成功上传的回调
    imgHandleSuccess(res) {
      let img = {
        name: res.data.fileName,
        url: 'http://121.199.29.84:8888/group1/' + res.data.id
      }
      this.fileList.push(img)
    },
    // 图片删除后的回调
    imgHandleRemove(file, fileList) {
      this.fileList = fileList
      this.$message.success('图片删除成功')
    },
    // 图片上传超出上限的回调
    imgOverLimitHandler() {
      this.$message.warning('最多上传3张图片')
    },

    // 工单提交按钮点击事件
    toCommitHandler() {
      // if判断用户是否已上传3张图片
      if (this.fileList.length == 3) {
        // 将图片列表中的url遍历到form中对应字段中（p1,p2,p3）
        for (let i = 1; i < 4; i++) {
          this.form['p' + i] = this.fileList[i - 1].url
        }
        // 后台接口交互
        postJSON('/workorder/repairOrder', this.form).then(res => {
          // 提示成功
          this.$message.success('提交成功')
          // 跳转至工单列表页
          this.$router.push({
            path: 'List'
          })
        })
      } else {
        this.$message.warning('请上传3张图片')
      }
    }
  },
  created() {
    this.order = this.$route.query
    // 查询工程设备树
    this.findEngineerDeviceTree()
  }
}
</script>

<style scoped>
.orderInfo {
  padding: 1em;
}
.order_header {
  height: 42px;
  line-height: 42px;
  background: #ededed;
  color: rgb(100, 99, 99);
  font-size: 18px;
  border-radius: 3px;
  padding-left: 1em;
}
</style>